<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        background-image: url(1.jpg) ;
    }
    li{
        list-style: none;
    }
    .mabe{
        width: 602px;
        height: 88px;
        background-color: white;
        margin:auto;
        margin-top: 80px;
    }
    .mabe img{
        width: 150px;
        float: left;
        padding: 2px 0px 0px 3px;
        cursor: pointer;
    }
</style>
<body>
    <div >               
      <ul class="mabe" >
        <li><img src=1.jpg></li>
        <li><img src=2.jpg ></li>
        <li><img src=3.jpg ></li>
        <li><img src=4.jpg ></li>
      </ul>
    </div>
    <script>
        //百度换肤效果：
        //点击图中的4个小图片任意一个，即可以修改切换背景图片给你选中的。
        let img = document.querySelector('ul').querySelectorAll('img')
                
        for(let i=0; i<img.length; i++){
        img[i].onclick = function(){
            document.body.style.backgroundImage='url('+this.src+')';
            //this.src"是表示字符串，传的就是“this.src”,url("+this.src+")传的就是src的值。
         }
        }
    </script>
</body>
</html>